<template>
    <div class="control">
        <Main :showTitle="true">
            <template v-slot:left>
                <div class="left-part-container">
                    <div>
                        <div class="left-title">
                            <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                            <span>模糊控制图</span>
                        </div>
                        <div>
                            <img width="380px" src="@/assets/controlModule.png" alt="">
                            <div class="open_p">
                                <el-popover
                                        placement="right"
                                        width="200"
                                        trigger="click"
                                        class="_poper"
                                >
                                    <div>
                                        <img src="@/assets/controlModule.png" alt="">
                                    </div>
                                    <i slot="reference" class="el-icon-full-screen"></i>
                                </el-popover>
                            </div>
                        </div>
                    </div>


                    <div class="left-title" style="margin-top: 20px">
                        <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                        <span>三维图</span>
                    </div>
                    <div>
                        <!--                        <Surface height="350px" />-->
                        <img src="@/assets/3.png" style="width: 100%;" alt="">
                    </div>

                    <div class="left-title" style="margin-top: 20px">
                        <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                        <span>控制规则</span>
                    </div>
                    <table class="table">
                        <tr>
                            <td style="position: absolute;top:16px;left:10px;font-weight: bold;font-size: 18px;border-bottom: none;">
                                Ec
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td style="font-weight: bold;font-size: 18px">E</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>NB</td>
                            <td>NM</td>
                            <td>NS</td>
                            <td>NW</td>
                            <td>ZO</td>
                            <td>PW</td>
                            <td>PS</td>
                            <td>PM</td>
                            <td>PB</td>
                        </tr>
                        <tr>
                            <td>NB</td>
                            <td>NB</td>
                            <td>NB</td>
                            <td>NM</td>
                            <td>NM</td>
                            <td>NW</td>
                            <td>NS</td>
                            <td>NS</td>
                            <td>ZO</td>
                            <td>ZO</td>
                        </tr>
                        <tr>
                            <td>NM</td>
                            <td>NB</td>
                            <td>NB</td>
                            <td>NS</td>
                            <td>NS</td>
                            <td>ZO</td>
                            <td>NW</td>
                            <td>NS</td>
                            <td>ZO</td>
                            <td>PW</td>
                        </tr>
                        <tr>
                            <td>NS</td>
                            <td>NB</td>
                            <td>NM</td>
                            <td>NW</td>
                            <td>NW</td>
                            <td>ZO</td>
                            <td>ZO</td>
                            <td>ZO</td>
                            <td>PW</td>
                            <td>PS</td>
                        </tr>
                        <tr>
                            <td>ZO</td>
                            <td>NM</td>
                            <td>NM</td>
                            <td>NW</td>
                            <td>ZO</td>
                            <td>ZO</td>
                            <td>ZO</td>
                            <td>PW</td>
                            <td>PS</td>
                            <td>PM</td>
                        </tr>
                        <tr>
                            <td>PS</td>
                            <td>NS</td>
                            <td>NS</td>
                            <td>ZO</td>
                            <td>ZO</td>
                            <td>ZO</td>
                            <td>PW</td>
                            <td>PW</td>
                            <td>PW</td>
                            <td>PB</td>
                        </tr>
                        <tr>
                            <td>PM</td>
                            <td>NW</td>
                            <td>ZO</td>
                            <td>PW</td>
                            <td>PW</td>
                            <td>ZO</td>
                            <td>PS</td>
                            <td>PS</td>
                            <td>PB</td>
                            <td>PB</td>
                        </tr>
                        <tr>
                            <td>PB</td>
                            <td>ZO</td>
                            <td>ZO</td>
                            <td>PS</td>
                            <td>PS</td>
                            <td>PW</td>
                            <td>PM</td>
                            <td>PM</td>
                            <td>PB</td>
                            <td>PB</td>
                        </tr>
                    </table>
                    <img class="part-title left-title logo" src="@/assets/home/logo.png" alt="">
                </div>
            </template>
            <template v-slot:right>
                <div class="right-part-1">
                    <div class="left-title">
                        <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                        <span>水肥一体机参数</span>
                    </div>
                    <BasePanel :baseInfo="baseInfo"></BasePanel>
                </div>
                <div class="right-part-2">
                    <div class="left-title">
                        <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                        <span>开关控制</span>
                    </div>
                    <el-row style="padding: 10px 0 0">
                        <el-col :span="12">
                            <div class="switch-area">
                                <div class="label">主水泵(地块一)</div>
                                <el-switch v-model="area1_switch"/>
                            </div>
                            <div class="switch-area">
                                <div class="label">主水泵(地块二)</div>
                                <el-switch v-model="area2_switch"/>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="switch-area">
                                <div class="label">模糊控制开关</div>
                                <el-switch v-model="area3_switch"/>
                            </div>
                        </el-col>
                    </el-row>

                </div>
                <div class="right-part-2">
                    <div class="left-title">
                        <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                        <span>土壤含水量变化</span>
                    </div>
                    <Tline height="150px" title="土壤含水量变化"  :line-data="dispersionData" type="rain"></Tline>
                </div>
                <div class="right-part-2">
                    <div class="left-title">
                        <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                        <span>差值变化</span>
                    </div>
                    <Tline height="150px"  title="差值变化" :line-data="dispersionData" type="d_value"></Tline>
                </div>
                <div class="right-part-2">
                    <div class="left-title">
                        <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                        <span>差值变化率变化</span>
                    </div>
                    <Tline height="150px" title="差值变化率变化" :line-data="dispersionData" type="d_value_rate"></Tline>
                </div>
            </template>
        </Main>
    </div>
</template>

<script>
    import Main from "./Main";
    import Surface from "../component/surface";
    import Tline from "../component/line";
    import BasePanel from "../component/BasePanel";
    import {dispersionQuery, landDeviceQuery,controlSwitch} from "../api/home";

    export default {
        components: {Main, Surface, Tline, BasePanel},
        name: "control",
        data() {
            return {
                baseInfo: [
                    {
                        title: '压力',
                        data: '-KPa'
                    },
                    {
                        title: '电导率',
                        data: '-mS/cm'
                    },
                    {
                        title: '流量',
                        data: '-m3/h'
                    },
                ],
                area1_switch: true,
                area2_switch: true,
                area3_switch:true,
                dispersionData:[]
            }
        },
        mounted() {
            this.getBaseData()
            this.getTime(new Date(new Date().toLocaleDateString()).getTime())
        },
        watch:{
            area1_switch(value){
                this.controlSwitch(1,value?1:0)
            },
            area2_switch(value){
                this.controlSwitch(1,value?1:0)
            },
            area3_switch(value){
                this.controlSwitch(1,value?1:0)
            }
        },
        methods: {
            getBaseData() {
                landDeviceQuery().then(res => {
                    this.baseInfo = [
                        {
                            title: '压力',
                            data: res.data.data.force + 'KPa'
                        },
                        {
                            title: '电导率',
                            data: res.data.data.conductivity + 'mS/cm'
                        },
                        {
                            title: '流量',
                            data: res.data.data.flow_rate + 'm3/h'
                        },
                    ]
                })
            },
            getTime(value) {
                // const currentTime =this.dateFormat('YYYY-mm-dd HH:MM:SS',new Date())
                dispersionQuery({
                    "landId": "a",
                    "startTime": (new Date(value)).getTime(),
                    "endTime": (new Date()).getTime()
                }).then(res => {
                    this.dispersionData = res.data.data
                })
            },
            controlSwitch(relayNum,relayState){
                const reqData = {
                    relayNum,relayState
                }
                controlSwitch(reqData).then(res=>{
                    if(res.data.code === 200)
                    this.$message.success('操作成功')
                    else {
                        this.$message.error('操作失败')
                    }
                })
            }

        }
    }
</script>

<style lang="less">
    .control {
        .left-part {
            margin-top: 30px;
            height: 1008px;
        }

        .left-part-container {
            position: absolute;
            width: 380px;
            height: 1008px;
            box-sizing: border-box;
            /*border: 1px solid rgba(77,77,77,1);*/
        }

        .left-title, .right-title {
            /*margin-left: -1px;*/
            position: relative;

            span {
                position: absolute;
                left: 15px;
                top: 10px;
                font-family: ziticqtezhanti;
                font-size: 24px;
                color: #FFFFFF;
                letter-spacing: 1px;
                text-shadow: 0 0 4px #FFFFFF;
            }
        }

        .right-part-1 {
            /*padding: 55px 0 10px;*/
            /*height: 200px;*/
        }

        .right-part-2 {
            /*margin-top: 20px;*/
            /*height: 200px;*/
            padding: 10px 0;
        }

        .logo {
            width: 400px;
            height: 92px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .table {
            width: 100%;
            color: #E6E6E6;
            position: relative;
            /*margin-top: 20px;*/
            border-collapse: collapse;
            border: 1px solid #E6E6E6;

            tr {
                padding: 10px 0;
                /*border:1px solid #E6E6E6*/
            }

            td {
                padding: 5px 0;
                text-align: center;
                border-bottom: 1px solid #E6E6E6;
            }
        }

        .part-content {
            border: 1px solid rgba(77, 77, 77, 1)
        }

        .switch-area {
            display: flex;
            flex-direction: row;
            /*justify-content: center;*/
            padding: 10px 0;

            .label {
                color: #E6E6E6;
                font-size: 14px;
                margin-right: 20px;
            }
        }
    }

    .open_p {
        position: absolute;
        top: 50px;
        right: 0;

        i {
            width: 20px;
            height: 20px;
            display: inline-block;
            color: #fff;
        }
    }

    .el-popover {
        background: none !important;
        border: none !important;
    }
</style>
